<template>
  <view class="keyboard-modal" v-if="show">
    <view class="modal-mask" @tap="close"></view>
    <view class="modal-content">
      <view class="modal-header">
        <text>请输入车牌</text>
        <text class="close-btn" @tap="close">×</text>
      </view>
      
      <view class="input-display">
        <text class="plate-char" 
              v-for="(char, index) in plateNumber" 
              :key="index"
              :class="{ active: currentIndex === index }">
          {{ char || ' ' }}
        </text>
      </view>

      <!-- 省份键盘 -->
      <view class="keyboard" v-if="currentIndex === 0">
        <view class="key-row" v-for="(row, index) in provinces" :key="index">
          <view class="key" 
                v-for="province in row" 
                :key="province"
                @tap="inputChar(province)">
            {{ province }}
          </view>
        </view>
      </view>

      <!-- 字母数字键盘 -->
      <view class="keyboard" v-else>
        <view class="key-row" v-for="(row, index) in alphanumeric" :key="index">
          <view class="key" 
                v-for="char in row" 
                :key="char"
                @tap="inputChar(char)">
            {{ char }}
          </view>
        </view>
        <view class="key-row">
          <view class="key delete" @tap="deleteChar">删除</view>
          <view class="key confirm" @tap="confirm">确定</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    editingPlate: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      plateNumber: ['', '', '', '', '', '', '',''],
      currentIndex: 0,
      provinces: [
        ['粤', '京', '津', '冀', '晋', '蒙', '辽', '吉', '黑'],
        ['沪', '苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂'],
        ['湘', '桂', '琼', '渝', '川', '贵', '云', '藏'],
        ['陕', '甘', '青', '宁', '新']
      ],
      alphanumeric: [
        ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
        ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
        ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
        ['Z', 'X', 'C', 'V', 'B', 'N', 'M']
      ]
    }
  },
  watch: {
    show: {
      immediate: true,
      handler(newVal) {
        if (newVal && this.editingPlate.licenseNumber) {
          // 将车牌号拆分成数组
          const plateChars = this.editingPlate.licenseNumber.split('');
          // 补充到8位
          while (plateChars.length < 8) {
            plateChars.push('');
          }
          this.plateNumber = plateChars;
          // 将光标移动到最后一个非空字符的后面
          this.currentIndex = plateChars.findIndex(char => char === '') || plateChars.length;
        }
      }
    }
  },
  methods: {
    inputChar(char) {
      if (this.currentIndex < this.plateNumber.length) {
        this.plateNumber[this.currentIndex] = char
        this.currentIndex++
      }
    },
    deleteChar() {
      if (this.currentIndex > 0) {
        this.currentIndex--
        this.plateNumber[this.currentIndex] = ''
      }
    },
    confirm() {
      // 最后一个可以为空其它不能为空
      if (this.plateNumber.every(char => char !== '') || this.plateNumber[7] === '') {
        this.$emit('confirm', this.plateNumber.join(''))
        this.close()
      } else {
        uni.showToast({
          title: '请输入完整车牌号',
          icon: 'none'
        })
      }
    },
    close() {
      this.$emit('update:show', false)
      this.reset()
    },
    reset() {
      this.plateNumber = ['', '', '', '', '', '', '', ''];
      this.currentIndex = 0;
    }
  }
}
</script>

<style lang="scss" scoped>
.keyboard-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;

  .modal-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
  }

  .modal-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-radius: 20rpx 20rpx 0 0;
    padding: 30rpx;

    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 30rpx;

      .close-btn {
        font-size: 40rpx;
        color: #999;
      }
    }

    .input-display {
      display: flex;
      justify-content: center;
      gap: 10rpx;
      margin-bottom: 30rpx;

      .plate-char {
        width: 60rpx;
        height: 80rpx;
        border: 2rpx solid #ddd;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32rpx;

        &.active {
          border-color: #ff9b9b;
        }
      }
    }

    .keyboard {
      .key-row {
        display: flex;
        justify-content: center;
        gap: 10rpx;
        margin-bottom: 10rpx;

        .key {
          width: 70rpx;
          height: 80rpx;
          background: #f5f5f5;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 8rpx;
          font-size: 28rpx;

          &.delete {
            width: 120rpx;
            background: #e0e0e0;
          }

          &.confirm {
            width: 120rpx;
            background: #ff9b9b;
            color: #fff;
          }
        }
      }
    }
  }
}
</style> 